<!--
 * @Author: 王俊杰 “251082517@qq.com”
 * @Date: 2024-05-10 16:38:26
 * @LastEditors: 王俊杰 “251082517@qq.com”
 * @LastEditTime: 2024-05-13 09:48:04
 * @FilePath: /vite-project/src/views/news/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="w-full">
    <div class="w-[1200px] mx-auto py-[60px] px-[20px]">
      <div
        class="border-b-[1px] border-[#efefef] font-[600] text-[24px] pb-[8px]"
      >
        新闻列表
      </div>
      <div class="pt-[16px]">
        <div
          v-for="item in list"
          :key="item.articleId"
          class="flex px-[40px] py-[24px] bg-[#F8F9FB] border-b-[1px] border-[#EEF0F1] last:border-b-0"
        >
          <div class="w-[240px] h-[121px] mr-[24px]">
            <img :src="item.url" alt="" />
          </div>
          <div>1234</div>
        </div>
      </div>
    </div>
    <!-- 漂浮的广告 -->
    <Advertise />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { getNewsList } from '@/api/news'
import Advertise from '@/views/components/advertise/index.vue'

const list = reactive([])

const getNews = async () => {
  const res = await getNewsList()
  list.length = 0
  list.push(...res.data)
}
getNews()
</script>

<style lang="scss" scoped></style>
